<div class="case-template-section">
    <h4 class="vpad10 text-primary">
        Metrics ({{$vm.keys($vm.template.metrics).length}})
        <a class="pull-right" href ng-click="$vm.addMetricRow()">
            <i class="fa fa-plus"></i>
        </a>
    </h4>

    <div class="empty-message" ng-if="$vm.templateMetrics.length === 0">
        No metrics have been added. <a href class="mr-xxxs" ng-click="$vm.addMetricRow()">Add a metric</a>
    </div>

    <div ng-if="$vm.templateMetrics.length !== 0">
        <div class="metric-item" ng-repeat="m in $vm.templateMetrics">
            <div class="row">
                <div class="col-sm-12">
                    <a href ng-click="$vm.removeMetric(m)"><span class="pull-right text-danger"><i class="fa fa-trash"></i> Delete</span></a>
                </div>
                <div class="col-sm-6">
                    <select class="form-control" ng-model="m.metric" ng-options="item.name as item.name for (m, item) in $vm.metrics" required></select>
                </div>
                <div class="col-sm-6">
                    <input type="number" class="form-control" ng-model="m.value">
                </div>
                <div class="col-sm-12">
                    <i class="pl-xxss fa fa-question-circle" aria-hidden="true"></i> <small>{{$vm.metrics[m.metric].description || 'No description'}}</small>
                </div>
            </div>
        </div>
    </div>
</div>
